<template>
  <!-- 美食详情 -->
  <div class="cate_detail">
    <router-view></router-view>
    <!-- 底部购买 -->
    <van-goods-action>
      <van-goods-action-icon
        :icon="shouCang"
        text="收藏"
        color="#ff5000"
        @click="onClickIcon"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="onShop"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>

    <!-- 底部 -->
    <i></i>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState, mapGetters } from "vuex";

export default {
  data() {
    return {
      show: false,
      shouCang: "star-o",
      order_form2: [],
    };
  },
  methods: {
    onClickIcon() {
      if (this.shouCang == "star-o") {
        Toast("收藏成功");
        this.shouCang = "star";
      } else {
        Toast("取消收藏");
        this.shouCang = "star-o";
      }
    },
    onClickButton() {
      this.order_form2 = this.order_form;
      if (this.$route.query.cata_id) {
        let cid = this.$route.query.cata_id;
        let num = 0;
        this.order_form2.push({ cid, num });
        this.$store.dispatch("setOrderFormAsync", this.order_form2);
        Toast("购买成功");
      } else {
        Toast("购买失败");
      }
    },
    onShop() {
      this.shop_car2 = this.shop_car;
      if (this.$route.query.cata_id) {
        let cid = this.$route.query.cata_id;
        let num = 1;

        this.shop_car2.push({ cid, num });
        this.$store.dispatch("setShopCarAsync", this.shop_car2);
        Toast("加入购物车成功");
      } else {
        Toast("失败");
      }
    },
  },
  computed: {
    ...mapState(["order_form", "shop_car"]),
  },
  // this.$store.dispatch("user/setAvatarAsync", data.avatar);
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";
.cate_detail {
  width: 100%;

  //   底部
  // .cate_detail_bottom {
  //   display: flex;
  //   padding: $p;
  //   position: fixed;
  //   justify-content: space-between;
  //   align-items: center;
  //   width: 100%;
  //   bottom: 0;
  //   background-color: #fff;
  //   height: 15vw;
  //   div {
  //     height: 10vw;
  //     border: 1px solid #ccc;
  //     width: 42vw;
  //     line-height: 9vw;
  //     text-align: center;
  //   }
  //   .left {
  //     color: #fff;
  //     background-color: $bgc;
  //   }
  // }
  & > i {
    height: 20vw;
    width: 100%;
    display: block;
  }
}
</style>